6.1:H106100 使用CSS 樣式表編排的文件需確保在除去樣式表後仍然能夠閱讀

不良設計

下列例子只依靠CSS樣式表，所以當CSS樣式表無法正常顯示時，會造成文字排列錯誤，網頁將傳達不正確的資訊。

不良設計：

  <DIV class="box">
  <SPAN class="menu1">DVD出租排行榜</SPAN>
  <SPAN class="menu2">VCD出租排行榜</SPAN>
  <SPAN class="item1">綠巨人浩克</SPAN>
  <SPAN class="item2">魔鬼終結者3</SPAN>
  <SPAN class="item3">王牌天神</SPAN>
  <SPAN class="item4">海底總動員</SPAN>
  <SPAN class="item5">霹靂嬌娃2</SPAN>
  <SPAN class="item6">綠巨人浩克</SPAN>
  </DIV>

範例結束

正確示範

配合使用DL、DT、DD標籤，可以避免CSS樣式表無法正常顯示時，內容依然可以依正確的排版方式顯示，如下：

正確範例：

  <DIV class="box">
  <DL>
  <DT class="menu1">DVD出租排行榜</DT>
  <DD class="item1">綠巨人浩克</DD>
  <DD class="item2">魔鬼終結者3</DD>
  <DD class="item3">王牌天神</DD>
  <DT class="menu2">VCD出租排行榜</DT>
  <DD class="item4">海底總動員</DD>
  <DD class="item5">霹靂嬌娃2</DD>
  <DD class="item6">綠巨人浩克</DD>
 </DL>
  </DIV>

範例結束